Deploying gatsby project in Firebase

May 09, 2021

when we use gatsby for content-oriented usecase such us blogs and articles , you dont need to deploy in dedicated servers rather can use free static host providers like Firebase,Github,Gatsby and more. Now Lets see how to deploy your gatsby project for free in Firebase.

Pre-requisites

Gatsby Project on your local machine
Firebase account

Steps

Create a project in Firebase
- Go to https://console.firebase.google.com/
- Click Add Project and finish creating your project.
Install the Firebase CLI with npm by running the following command:
```
npm install -g firebase-tools
```
Sign into Firebase using your Google account by running the following command:
```
firebase login
```
Navigate into your gatsby project directory and setup firebase:
```
firebase init
```
This command will prompt you to:
- select the Firebase products you wish to setup.select Firebase Hosting.
- select the Firebase Project you wish to use.Select the one you just created.
When prompted to select your public directory, press enter. It will default to public, which is also Gatsby’s default public directory.

Update the firebase.json with the following cache settings

{
    "hosting": {
        "public": "public",
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
        "headers": [
        {
            "source": "**/*",
            "headers": [
            {
                "key": "cache-control",
                "value": "public, max-age=0, must-revalidate"
            }
            ]
        },
        {
            "source": "static/**",
            "headers": [
            {
                "key": "cache-control",
                "value": "public, max-age=31536000, immutable"
            }
            ]
        },
        {
            "source": "**/*.@(css|js)",
            "headers": [
            {
                "key": "cache-control",
                "value": "public, max-age=31536000, immutable"
            }
            ]
        },
        {
            "source": "sw.js",
            "headers": [
            {
                "key": "cache-control",
                "value": "public, max-age=0, must-revalidate"
            }
            ]
        },
        {
            "source": "page-data/**",
            "headers": [
            {
                "key": "cache-control",
                "value": "public, max-age=0, must-revalidate"
            }
            ]
        }
        ]
    }
}

Prepare your site for deployment by running gatsby build. This generates a publishable version of your site in the public folder.
```
gatsby build
```
Deploy your site by running the following command:
```
firebase deploy
```

All done! Once the deployment concludes, you can access your website using firebaseProjectId.firebaseapp.com or firebaseProjectId.web.app.

References:

#gatsby #firebase